<template>
<div id="Equipment">
  <van-tabs style="flex-shrink: 0;" @change="onSearch()" v-model="active" inverse indicator-color="#2196F3" color="#2196F3" 
    text-color="rgba(0, 0, 0, 0.54)" center :swipe-threshold="5">
    <van-tab>
      <div slot="title" style="line-height: 1.2; height: 96%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <span style="font-size: 0.3rem;">在线</span>
        <span style="font-size: 0.2rem;" v-if="$store.state.userInfo.roleType != 3">({{ status.onLines || 0 }})</span>
      </div>
    </van-tab>
    <van-tab>
      <div slot="title" style="line-height: 1.2; height: 96%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <span style="font-size: 0.3rem;">离线</span>
        <span style="font-size: 0.2rem;" v-if="$store.state.userInfo.roleType != 3">({{ status.offLine || 0 }})</span>
      </div>
    </van-tab>
    <van-tab>
      <div slot="title" style="line-height: 1.2; height: 96%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <span style="font-size: 0.3rem;">已绑</span>
        <span style="font-size: 0.2rem;" v-if="$store.state.userInfo.roleType != 3">({{ status.isBinding || 0 }})</span>
      </div>
    </van-tab>
    <van-tab>
      <div slot="title" style="line-height: 1.2; height: 96%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <span style="font-size: 0.3rem;">未绑</span>
        <span style="font-size: 0.2rem;" v-if="$store.state.userInfo.roleType != 3">({{ status.notBinding || 0 }})</span>
      </div>
    </van-tab>
    <van-tab>
      <div slot="title" style="line-height: 1.2; height: 96%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <span style="font-size: 0.3rem;">故障</span>
        <span style="font-size: 0.2rem;" v-if="$store.state.userInfo.roleType != 3">({{ status.fault || 0 }})</span>
      </div>
    </van-tab>
  </van-tabs>
  <div style="display: flex;" v-if="$store.state.userInfo.roleType <= 1">
    <template v-if="active == 1">
      <div class="van-dropdown-menu" style="width: 50%;" @click="cUser.show = true">
        <div class="van-dropdown-menu__bar">
          <div role="button" tabindex="0" class="van-dropdown-menu__item">
            <span class="van-dropdown-menu__title">
              <div class="van-ellipsis">{{ cUser.name }}</div>
            </span>
          </div>
        </div>
      </div>
      <van-dropdown-menu style="width: 50%;">
        <van-dropdown-item v-model="lastHeart" :options="monthoption" @change="onSearch"/>
      </van-dropdown-menu>
    </template>
    <template v-else>
      <div class="van-dropdown-menu" style="width: 100%;" @click="cUser.show = true">
        <div class="van-dropdown-menu__bar">
          <div role="button" tabindex="0" class="van-dropdown-menu__item">
            <span class="van-dropdown-menu__title">
              <div class="van-ellipsis">{{ cUser.name }}</div>
            </span>
          </div>
        </div>
      </div>
    </template>
  </div>
  <van-search v-model="content" placeholder="请输入" show-action shape="round"> 
    <div slot="label" @click="showAction = true">
      {{ labelName }}
      <van-icon name="arrow-down" />
    </div>       
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="tongji-box" v-for="(item, index) in list" :key="index" @click="showBlank( item )">
        <div class="tongji-item">
          <div class="tongji-row">
            <div>设备编号：</div>
            <div @click.stop="$store.commit('copy', item.equipmentNum)">{{ item.equipmentNum }}</div>
          </div>
          <div class="tongji-row">
            <div>设备心跳时间：</div>
            <div>{{ item.heartTime }}</div>
          </div>
          <div class="tongji-row">
            <div>设备型号：</div>
            <div>{{ item.equipmentType }}口 </div>
          </div>
          <div class="tongji-row" v-if="$store.state.userInfo.roleType < 3">
            <div>可借宝数：</div>
            <div>{{ item.boorowSum }}个</div>
          </div>
          <div class="tongji-row" v-if="$store.state.userInfo.roleType < 3">
            <div>可还宝数：</div>
            <div>{{ item.returnSun }}个</div>
          </div>
          <div class="tongji-row">
            <div>iccid：</div>
            <div @click.stop="$store.commit('copy', item.iccid)">{{ item.iccid }}</div>
          </div>
          <div class="tongji-row">
            <div>shopId：</div>
            <div>{{ item.shopId }}</div>
          </div>
          <div class="tongji-row">
            <div>价格：</div>
            <div>{{ item.chargeMoney }}</div>
          </div>
          <div class="tongji-row">
            <div>所属商家：</div>
            <div class="ft-blue">{{ item.shopName }}</div>
          </div>
          <div class="tongji-row" v-if="item.xinhao">
            <div>信号：</div>
            <div>{{ item.xinhao }}</div>
          </div>
          <div class="tongji-row">
            <div>设备版本：</div>
            <div>{{ item.bb }}</div>
          </div>
          <div class="tongji-row" @click.stop="shengji(item)" v-if="active == 0 && $store.state.userInfo.roleType < 3">
            <div>设备升级：</div>
            <div>点击升级</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>  
  
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="设备详情" left-arrow @click-left="blank.show = false"/>
      <div style="height: 2rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; border-bottom: 1px solid #F1F1F1;">
        <img :src="blank.info.shopPhotUrl" style="width: 1.4rem; height: 1.4rem;"/>
        <div style="height: 1.6rem; width: 3.6rem; font-size: 0.25rem; line-height: 0.5rem;">
          <div class="ft-blue" style="font-size: 0.3rem; line-height: 0.6rem;">{{ blank.info.shopName }}</div>
          <div class="ft-org">{{ blank.info.equipmentNum }}</div>
          <div class="ft-grade">{{ blank.info.createTime }}添加</div>
        </div>
        <div></div>
        <!-- <div style="width: 1.3rem; height: 0.5rem; line-height: 0.5rem; text-align: center; color: #FFFFFF; border-radius: 0.1rem; font-size: 0.2rem;
          background: #16B8BE;" @click="allForce">全部弹出</div> -->
      </div>
      <div class="flex-body" style="background: #FFF;">
        <div class="bao-box" v-for="item in blank.list" :key="item.sn">
          <div style="display: flex; flex-direction: column;">
            <div class="bao-icon">宝</div>
            <div class="lock-switch" >
             <span style="font-size: 14px;">开</span>
             <van-switch size="18px" v-model="item.lockStatus" active-color="#ee0a24"  @change="lockChange( item )"/>
             <span style="font-size: 14px;">锁</span>
            </div>
          </div>
          <div class="bao-content">
            <div class="bao-title">
              <span style="font-size: 0.3rem; color: #333; font-weight: bold;">卡槽位置:{{ item.n }}</span>
              <div class="bao-dianliang">{{ item.e * 10 }}%</div>
            </div>
            <div style="height: 0.35rem; line-height: 0.35rem; font-size: 0.28rem; color: #999; font-size: 0.3rem;">{{ item.sn }}</div>
            <div  style="font-size: 0.28rem">
              <div v-if="item.orderNum != 0 && item.orderNum != null">使用次数：{{ item.orderNum }}次</div>
              <div v-if="item.useHour != 0 && item.useHour != null">使用时长：{{ item.useHour.toFixed(2) }}h</div>
            </div>
          </div>
          <template v-if="$store.state.userInfo.role.lend == 0">
            <div style="height: 0.7rem; position: relative; top: -0.1rem;">
              <div class="bao-button" @click="oneForce( item.n )">强制弹出</div>
            </div>
            <div style="height: 0.7rem; position: relative; top: -0.1rem">
              <div class="bao-button" @click="oneJiechu( item.n )">借出设备</div>
            </div>
          </template>
          <template v-else>
            <div>
              <div class="bao-button" @click="oneForce( item.n )">强制弹出</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </van-popup>

  <van-action-sheet v-model="showAction" :actions="actions" @select="selectAction" cancel-text="取消"
   @cancel="showAction = false"/>

  <van-popup v-model="cUser.show" position="bottom" :style="{ height: '100%' }">
    <choose-user :roleType="null" :cb="(user) => userChange(user)" :close="() => cUser.show = false" :oldValue="cUser.id"></choose-user>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import ChooseUser from '../Mine/ChooseUser.vue';
import axios from '@/utils/request';

@Component({ components: { ChooseUser } })
export default class Equipment extends Vue {

  active: any = 0  
  status: any = {
    onLines: 0,
    offLine: 0,
    isBinding: 0,
    notBinding: 0,
    fault: 0
  }
  monthoption: any = [
    { text: '离线24小时', value: 1 },
    { text: '离线48小时', value: 2 },
    { text: '离线一周', value: 7 },
    { text: '离线一个月', value: 30 },
    { text: '离线三个月', value: 90 },
    { text: '离线一年', value: 365 }
  ]
  lastHeart: any = 1

  cUser: any = {
    name: '全部',
    id: this.$store.state.userInfo.userId,
    show: false
  }

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''
  content: any = ''

  showAction: any = false
  labelName: any = '店铺名称'
  actions: any = [
    { name: '店铺名称' },
    { name: '设备编号' }
  ]
  selectAction(obj: any) {
    this.labelName = obj.name;
    this.showAction = false;
    this.onSearch();
  }
  
  getList() {
    let page = this.page, size = 10, vague = this.active, 
      userId = this.cUser.id, equipmentNum = this.searchValue;
    let query: any = { page, size, vague, userId };
    if( this.labelName == '店铺名称' ) { query.equipmentNum = ''; query.content = this.content; } 
    else { query.equipmentNum = this.content; query.content = ''; }
    if (vague == 1) {
      query.lastHeartTime = this.getLastTime(this.lastHeart);
      query.sort = 'a.heart_time desc';
    }
    axios.get('/api/chargerPlaEquipmentController/getChargerPlaEquipmentList', query)
    .then((res: any) => {
      let json = res || {};
      let list = json.list || [];
      this.page = page + 1;
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
      if(list.length == 0) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }
  getLastTime(days: any) {
    let now = new Date().getTime();
    let lastHeartTime: any = new Date(now - (days * 24 * 60 * 60 * 1000));
    return lastHeartTime.format('yyyy-MM-dd HH:mm:ss');
  }

  shengji(item: any) {
    this.$dialog.confirm({ message: `设备升级后会关闭设备大部分提示音，设备升级过程中请保持通电，确定现在要对设备进行升级吗？` }).then(() => {
      axios.get('/api/chargerPlaEquipmentController/terminalVersion', {
        sn: item.equipmentNum
      }).then((res: any) => {
        if ( res.canUpdate ) {
          axios.get('/api/chargerPlaEquipmentController/terminalUpdate', {
            sn: item.equipmentNum
          }).then(() => {
            this.$toast('正在为该设备升级，请保证设备在升级过程中处于通电状态');
          });
        }
      });
    })
  }

  onSearch() {
    this.page = 1;
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.$router.replace({ name: this.$route.name, query: { active: this.active } });
    this.getList();
  }
  userChange(user: any) {
    this.cUser = { name: user.nick, id: user.userId, show: false };
    this.onSearch();
  }

  blank: any = {
    show: false,
    info: {},
    list: []
  }
  showBlank(item: any) {
    if(this.$store.state.userInfo.roleType !== 0 && this.$store.state.userInfo.role && this.$store.state.userInfo.role.popupPower !== 0) return ;
    this.blank.info = { shopName: item.shopName, equipmentNum: item.equipmentNum, createTime: item.createTime, 
      shopPhotUrl: item.shopPhotUrl || 'https://dxt-test.oss-cn-shenzhen.aliyuncs.com/prod/540589/20190820151601.jpg' };
    axios.get('/api/chargerPlaController/getChargerInfo', { equipmentNum: item.equipmentNum }).then((res: any) => {
      let json = res || {};
      this.blank.list = json.list || [];
      this.blank.show = true;   
    }); 
  }
  allForce() {    
    this.$dialog.confirm({ message: `您确认要全部弹出充电宝吗？` }).then(() => {
      axios.get(`/api/chargerPlaController/force`, { equipmentNum: this.blank.info.equipmentNum, n: 0 }).then(() => this.$toast(`弹出成功！`));
    })
  }
  oneForce(n: any) {    
    this.$dialog.confirm({ message: `您确认要弹出卡槽位置 ${ n } 的充电宝吗？` }).then(() => {
      axios.get(`/api/chargerPlaController/force`, { equipmentNum: this.blank.info.equipmentNum, n }).then(() => this.$toast(`弹出成功！`));
    });
  }
  oneJiechu(n: any) {  
    this.$dialog.confirm({ message: `您确认要借出卡槽位置 ${ n } 的充电宝吗？` }).then(() => {
      axios.get(`/api/chargerPlaController/borrow`, { equipmentNum: this.blank.info.equipmentNum, n }).then(() => this.$toast(`借出成功！`));
    });
  }

  created() {
    console.log(this.$store);
    if(this.$route.query.active) this.active = Number(this.$route.query.active);
    axios.get('/api/chargerPlaEquipmentController/getAllEquipmentStatus', {
      userId: this.$store.state.userInfo.userId
    }).then((res: any) => {
      this.status = res;
    });
  }
  
  // 开关
  lockChange(item: any) {
    console.log(item);
    //       {
//   "lockStatus": 1, 0开 1锁
//   "n": 16,
//   "sn": "CT034191200216"
// }
    let {lockStatus, n } = item;
    // 0开 1锁
    let params = {
      lockStatus: lockStatus ? 1 : 0,
      n, 
      sn: this.blank.info.equipmentNum
    }
    axios.post('/api/chargerPlaEquipmentController/terminalLock', params).then((res: any) => {
      console.log(res);
      
    });
  }
  
};
</script>

<style lang="scss" scoped>
#Equipment {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;  
  .bao-box {
    width: 6.9rem;
    height: 2.2rem;
    background: #FFFFFF;
    border-radius: 0.14rem;
    margin: 0.2rem auto;
    box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
    position: relative;
    .bao-icon {
      width: 0.9rem;
      height: 0.9rem;
      line-height: 0.9rem;
      text-align: center;
      border-radius: 50%;
      font-size: 0.4rem;
      color: #FFFFFF;
      background: #16B8BE;
      position: absolute;
      left: 0.23rem;
      top: 0.45rem;
    }
    .lock-switch {
      position: absolute;
      left: 0rem;
      top: 1.6rem;
      display: flex;
      align-items: center;
    }
    .bao-content {
      position: absolute;
      top: 0.45rem;
      left: 1.4rem;
      .bao-title {
        height: 0.55rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        .bao-dianliang {
          width: 0.88rem;
          height: 0.38rem;
          line-height: 0.38rem;
          border-radius: 0.16rem;
          text-align: center;
          background: rgba(46,208,138,0.1);
          font-size: 0.16rem;
          color: #2ED08A;
          margin-left: 0.4rem;
        }
      }
    }
    .bao-button {
      width: 1.67rem;
      height: 0.54rem;
      line-height: 0.54rem;
      border-radius: 0.27rem;
      text-align: center;
      font-size: 0.25rem;
      color: #FFFFFF;
      background: #16B8BE;
      box-shadow: 3px 3px 18px 3px rgba( 22, 184, 190, 0.32 );
      position: absolute; 
      top: 0.45rem;
      right: 0.32rem;
    }
  }
  .van-tab {
    .van-ellipsis {
      height: 100%;
      &>div {
        height: 100%;
      }
    }
  }
}
</style>

